iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

從入門前端技巧到uiux設計的心得分享系列 第 25

【Day 25】 UI上的字體應用心得,字體知識篇

  • 分享至 

  • xImage
  •  

字體是排版上很重要的元素,尤其是UI的使用上,對使用者閱讀非常重要的一環,但很多人都不太了解相關的規範與知識,今天來介紹一下字體的知識。


字體基本知識

介紹一下字體的各種相關名詞。

  • Glyph 字形
    是字的形體和骨骼,簡單來說就是字的形狀,同一個字可以有不同的字形,而不影響其表達的意思。

英文字a的小寫,不同字形
https://ithelp.ithome.com.tw/upload/images/20221004/20152090fmwx2QZljO.png

  • Font 字型
    是一整套同樣風格、樣式、尺寸、粗細等的字形,例如:一整套用於標題的10號黑體字,就叫做一套字型,或是"Noto Sans CJK TC Thin 100 16pt"。

  • 字體 Typeface
    是由一個或多個字型組成的集合,字體的每種字型都有特定的風格、尺寸、粗細、寬度、斜體、裝飾等。例如:"Noto Sans CJK TC Thin"和"Noto Sans CJK TC Bold"是不同字型,但都是"Noto Sans CJK TC"這個字體。

字型跟字體很容易被搞混,可以理解的概念是,從字型往下到字體,是由小到大的集合。

襯線體與非襯腺體

各種字體又可以分成兩種類型,就是襯線體與非襯線體。

  • 襯線體
    特徵是筆畫的開始與末端都會有額外裝飾,筆畫粗細也不相同,傳統印刷業普遍認為襯線體可讀性更好,因為為了裝飾,筆畫通常較細,也因此字體內部空間較足,印刷出來不會因墨水糊開,辨識度較高。複雜的外型也能體現字體的優美,但也容易導致使用者視覺疲勞,也因電腦剛發展初期,無法使用太多像素導致襯線體無法被呈現出來或辨識度下降,所以到後來也有一段時間,很多人不希望介面使用襯線體。

  • 非襯線體
    拋棄裝飾襯線,剩下主幹,造型簡潔更有現代感,筆畫粗細差不多,識別性很高的字體,在漢字等東亞字體中稱為黑體。有也分為方體、原體、綜藝體等。

心得

在電腦如此發展的年代,襯線體的缺點也都慢慢被補足,只要搭配對風格與應用場合,襯線體也能夠使用在各種介面上,下篇分享字體的規範與應用。


上一篇
【Day 24】Visual Studio Code的實用技巧和擴充套件
下一篇
【Day 26】使用Sourcetree視覺化git作業
系列文
從入門前端技巧到uiux設計的心得分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言